<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="dist/echarts.min.js"></script>

<body>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;

        }

        #main {
            width: 80%;
            height: 90%;
            background: rgba(0, 0, 0, 0);
        }
    </style>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main"></div>

    <script type="text/javascript">
        // var worldMapContainer = document.getElementById('serverStatus');

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option;

        myChart.showLoading({

            text: 'Wait Loading Chart',
            color: '#ff33cc',
            textColor: '#fff',
            maskColor: 'rgba(0,0,0,0)',
            zlevel: 5,

        });

        var cname;
        var ctypea = 'line';
        var ctypeb = 'bar';
        var valueTypea;
        var valueTypeb;
        var items = new Array();
        var valueas = new Array();
        var valuebs = new Array();


        function SetValue() {

            ue.obj.setchartitem().then(function (ReturnValue) {
                items = ReturnValue;
            });

            ue.obj.setchartvaluea().then(function (ReturnValue) {
                valueas = ReturnValue;
            });

            ue.obj.setchartvalueb().then(function (ReturnValue) {
                valuebs = ReturnValue;
            });

            ue.obj.setcharttypea().then(function (ReturnValue) {
                ctypea = ReturnValue;
            });

            ue.obj.setcharttypeb().then(function (ReturnValue) {
                ctypeb = ReturnValue;
            });

            ue.obj.setchartvaluetypea().then(function (ReturnValue) {
                valueTypea = ReturnValue;
            });
            ue.obj.setchartvaluetypeb().then(function (ReturnValue) {
                valueTypeb = ReturnValue;
            });

            ue.obj.setcharfloati100().then(function (ReturnValue) {
                floatI100 = ReturnValue;
            }); 

            if (floatI100) {

                for (let i = 0; i < valueas.length; i++) {
                    var ix = valueas[i] / 100;
                    valueas[i] = ix;
                }

                for (let i = 0; i < valuebs.length; i++) {
                    var ix = valuebs[i] / 100;
                    valuebs[i] = ix;
                }

            }

        }

        function SetOption() {
            // alert("Function returned : " + cname);

            option = {
                tooltip: {},
                // 修改图表大小
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                legend: {
                    data: [valueTypea, valueTypeb]
                },
                xAxis: {
                    // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    // type: 'category',
                    // boundaryGap: false,
                    data: items
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: valueTypea,
                    type: ctypea,

                    // data: [5, 20, 36, 10, 10, 20]
                    data: valueas
                },
                {
                    name: valueTypeb,
                    type: ctypeb,

                    // stack: '总量',
                    data: valuebs
                }
                ]
            };
        }

        setInterval(function () {
            SetValue();
            SetOption();

            myChart.setOption(option);
            myChart.hideLoading();

            window.addEventListener("resize", function () {
                myChart.resize();
            })

        }, 1000);


    </script>

</body>

</head>